/* 学习目标：掌握 - 受控组件的写法  */
// 作用: 类似v-model, 双向绑定
// 场景: 1. 收集用户输入数据 2. 回填表单

import React, { useState } from 'react';

export default function App() {
  const [count, setCount] = useState('');

  return (
    <div>
      <input
        type="text"
        // 💥💥关键点：1. state控制value
        value={count}
        //💥💥关键点： 2. onChange配合setState修改数据
        onChange={(e) => {
          setCount(e.target.value);
        }}
        // 在React中onChange替带了onInput
        // 在React中失焦事件，用的onBlur
        onBlur={(e) => {
          console.log('e.target.value  ----->  ', e.target.value);
        }}
      />
    </div>
  );
}
